<template>
    <ph-th class="ph-th-sort">
        <slot></slot>
        <div class="ph-sort-icons">
            <div :class="ascCn" @click="onSort(SortStatus.asc)"></div>
            <div :class="descCn" @click="onSort(SortStatus.desc)"></div>
        </div>
    </ph-th>
</template>
<script lang="ts">
import { computed, defineComponent, inject, PropType } from 'vue'
import PhTh from './th.vue'
import {SortStatus} from './struct'
export default defineComponent({
    components:{PhTh},
    props:{
        name:{type:String,default:''},
        dataType:{type:String,default:''},
        sortName:{
            type:String
        },
        sortMode:{
            type:Number as PropType<SortStatus>
        }
    },
    setup(props) {
        const notifySort = inject<(s:number,k:string,dt:string)=>void>('tbSort')
        const ascCn = computed(()=>{
            return {
                'ph-arrow':true,
                'ph-arrow-up':true,
                'ph-arrow-active':props.sortMode===SortStatus.asc&&props.sortName===props.name
            }
        })
        const descCn = computed(()=>{
            return {
                'ph-arrow':true,
                'ph-arrow-down':true,
                'ph-arrow-active':props.sortMode===SortStatus.desc&&props.sortName===props.name
            }
        })
        const onSort = (s:SortStatus)=>{
            if(s===props.sortMode&&props.sortName===props.name)return
            notifySort&&notifySort(s,props.name,props.dataType)
        }
        return {ascCn,descCn,onSort,SortStatus}
    },
})
</script>
<style lang="scss">
.ph-th-sort{
    & > div{
        padding-right:  var(--ph-20);
    }
    .ph-sort-icons{
        position: absolute;
        right: var(--ph-8);
        top:50%;
        transform: translateY(-50%);
        .ph-arrow{
            border: 5px solid transparent;
            margin: var(--ph-5) 0;
            cursor: pointer;
            opacity: .5;
            &-up{
                border-bottom-color: #000;
            }
            &-down{
                border-top-color: #000;
            }
            &-active,
            &:hover{
                opacity: 1;
            }
        }
    }
}
</style>
